<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>联系人管理</el-breadcrumb-item>
      <el-breadcrumb-item>联系人添加管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div align="center" class="d1">
        <div style="float: left">
          <el-button @click="goafter" type="info">返回上一级</el-button>
        </div>
        <h3 style="color: mediumblue">联系人添加界面</h3>
      </div>
      <div class="d2">
        <el-form ref="form" :rules="rules" :ref="ruleForm" :model="addLinkForm" label-width="80px">
          <el-row :gutter="100">
            <el-col :span="11">
              <el-form-item label="联系人" prop="name">
                <el-input v-model="addLinkForm.name"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <el-radio v-model="addLinkForm.sex" :label="0">男</el-radio>
                <el-radio v-model="addLinkForm.sex" :label="1">女</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="电话号" prop="tel">
                <el-input v-model="addLinkForm.tel"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="addLinkForm.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="邮寄地址" prop="recvAddress">
                <el-input v-model="addLinkForm.recvAddress"></el-input>
              </el-form-item>
              <el-form-item label="职位" prop="position">
                <el-input v-model="addLinkForm.position"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="所属客户" prop="customerId" v-if="this.include==null">
                <el-select v-model="addLinkForm.customerId"  placeholder="请选择客户">
                  <el-option
                    v-for="item in options"
                    :key="item.name"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="描述">
                <el-input type="textarea" v-model="addLinkForm.remarks"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div align="center" style="float: right;width: 100%">
            <el-form-item>
              <div>
                <el-button type="primary" @click="addCustomer">添加</el-button>
                <el-button @click="goafter">取消</el-button>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "AddLinkman",
    data() {
      return {
        addLinkForm: {
          customerId:''
        },
        include:'',
        options: [],
        ruleForm: {},
        rules: {
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'},
            {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
          ],
          customerId: [
            {required: true, message: '请选择所属客户', trigger: 'change'}
          ],
          sex: [
            {type: 'array', required: true, message: '选择性别', trigger: 'change'}
          ],
          tel: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {min: 11, max: 11, message: '长度为11位的手机号', trigger: 'blur'}
          ],
          email: [
            {required: true, message: '请输入邮箱号', trigger: 'blur'},
            {min: 12, max: 12, message: '长度为12位的邮箱号', trigger: 'blur'}
          ],
          recvAddress: [
            {required: true, message: '请输入地址', trigger: 'blur'},
            {min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
          ],
          position: [
            {required: true, message: '请输入职位', trigger: 'blur'},
          ],
        },
      }
    },
    methods: {
      goafter() {
        this.$router.go(-1)
      },
      addCustomer() {
        if (this.addLinkForm.customerId != null) {
          this.$http.post("/information/pi-linkman/add", this.addLinkForm).then((res) => {
            if (res.data.success) {
              this.$message.success(res.data.message)
              this.$confirm('是否继续添加, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.$router.go(0)
              }).catch(() => {
                this.$router.push("/linkMan")
              });
            } else {
              this.$message.error(res.data.message)
            }
          })
        } else {
          this.$message.error("所属客户不能为空")
        }
      },
      addLinkman() {
        this.$router.push("/addLinkman")
      },
      cxCotumer() {
        this.$http.post("/information/pi-customer/cxCotumerAll", {}).then((res) => {
          if (res.data.success) {
            this.options = res.data.result
          } else {
            this.$message.error(res.data.result.message)
          }
        })
      },
      hx(id) {
        this.$http.post("/information/pi-linkman/cxLinkMan/" + id).then((res) => {//添加原材料
          if (res.data.success) {
            this.addLinkForm = res.data.result
            this.include=this.addLinkForm.customerId
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
    },
    mounted() {
      let id = this.$route.query.id
      this.addLinkForm.customerId = this.$route.query.customerIdd
      this.include=this.$route.query.customerIdd
      if (id != null) {
        this.hx(id)
      }
      this.cxCotumer()
    },
  }
</script>

<style scoped>
  .d1 {
    border-bottom: 1px solid #333744;
  }

  .d2 {
    margin: 20px
  }
</style>
